<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				:rules="formRules"
				label-width="150px"
				label-suffix=":"
				:inline="true"
			>
				<div>伙牌精筛</div>
				<el-divider></el-divider>
				<el-form-item label="会员账号" prop="userName">
					<el-input
						v-model.trim="ruleForm.userName"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 210px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="查询时间">
					<el-date-picker
						v-model="queryTime"
						type="daterange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="同桌率（%）">
					<el-input
						v-model="ruleForm.startDeskmateRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'float', num: '2' }"
						name="startDeskmateRate"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								1,
								'startDeskmateRate',
								'endDeskmateRate',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="ruleForm.endDeskmateRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'float', num: '2' }"
						name="endDeskmateRate"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								2,
								'startDeskmateRate',
								'endDeskmateRate',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="同桌手牌数">
					<el-input
						v-model="ruleForm.startHandCount"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'int' }"
						name="startHandCount"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								1,
								'startHandCount',
								'endHandCount',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="ruleForm.endHandCount"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'int' }"
						name="endHandCount"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								2,
								'startHandCount',
								'endHandCount',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="同桌盈利">
					<el-input
						v-model="ruleForm.startDeskmateProfit"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="startDeskmateProfit"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								1,
								'startDeskmateProfit',
								'endDeskmateProfit',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="ruleForm.endDeskmateProfit"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="endDeskmateProfit"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								2,
								'startDeskmateProfit',
								'endDeskmateProfit',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="总盈利">
					<el-input
						v-model="ruleForm.startTotalProfit"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="startTotalProfit"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								1,
								'startTotalProfit',
								'endTotalProfit',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="ruleForm.endTotalProfit"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="endTotalProfit"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								2,
								'startTotalProfit',
								'endTotalProfit',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="盈利率（%）">
					<el-input
						v-model="ruleForm.startEarningsRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="startEarningsRate"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								1,
								'startEarningsRate',
								'endEarningsRate',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="ruleForm.endEarningsRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="endEarningsRate"
						clearable
						@blur="
							handleAmount(
								ruleForm,
								2,
								'startEarningsRate',
								'endEarningsRate',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						:disabled="loading"
						@click="handleReset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90630044')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:disabled="loading || exportLoading"
						:loading="exportLoading"
						@click="handleExport"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div class="show-btn-action">
				<span
					class="sort-content"
					v-for="(item, index) in btnActionList"
					:key="index"
				>
					<span class="sort-title">{{ item.description }}</span>
					<span class="sort-icon">
						<i
							class="sort-caret sort-top"
							:class="getSortClass(item.code, item.asc, 1)"
							@click="sortAscOrDesc(item.code, item.asc)"
						></i>
						<i
							class="sort-caret sort-bottom"
							:class="getSortClass(item.code, item.desc, 2)"
							@click="sortAscOrDesc(item.code, item.desc)"
						></i>
					</span>
				</span>
			</div>
			<template v-if="dataList.length">
				<PartnerCardDetail
					v-for="(item, index) in dataList"
					:key="index"
					:dataCount="item.dataCount"
					:dataList="item.dataList"
					:isShowAction="true"
					:params="getSearchParams()"
				/>
			</template>
			<template v-else>
				<div
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
				>
					<PartnerCardDetail :dataCount="{}" :dataList="[]" />
				</div>
			</template>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'
import PartnerCardDetail from '@/views/dxn/riskManager/components/partnerCardDetail'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.partnerCardRefined,
	components: { MainContent, PartnerCardDetail },
	mixins: [list],
	props: {
		params: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			dataList: [],
			exportLoading: false,
			loading: false,
			ruleForm: {
				userName: undefined,
				startEarningsRate: undefined,
				endEarningsRate: undefined,
				startTotalProfit: undefined,
				endTotalProfit: undefined,
				startDeskmateRate: undefined,
				endDeskmateRate: undefined,
				startHandCount: undefined,
				endHandCount: undefined,
				startDeskmateProfit: undefined,
				endDeskmateProfit: undefined,
				orderField: '',
				sortType: ''
			},
			numberFieldList: [
				'startEarningsRate',
				'endEarningsRate',
				'startDeskmateProfit',
				'endDeskmateProfit',
				'startTotalProfit',
				'endTotalProfit'
			],
			queryTime: [start(), end()],
			btnActionList: [
				{
					code: 'deskmate_rate',
					description: '同桌率',
					desc: 'desc',
					asc: 'asc'
				},
				{
					code: 'deskmate_hand_count',
					description: '同桌手牌数',
					desc: 'desc',
					asc: 'asc'
				},
				{
					code: 'challenge_hand_count',
					description: '单挑手牌数',
					desc: 'desc',
					asc: 'asc'
				},
				{
					code: 'deskmate_profit',
					description: '同桌盈利',
					desc: 'desc',
					asc: 'asc'
				},
				{
					code: 'earnings_rate',
					description: '盈利率',
					desc: 'desc',
					asc: 'asc'
				}
			]
		}
	},
	computed: {
		formRules() {
			return {
				userName: [
					{
						required: true,
						message: this.$t('common.utils.no_empty'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.partnerCardRefined) > -1) {
				this.getRouteQuery(true)
			}
		}
	},
	mounted() {
		this.getRouteQuery(this.$route.query?.userName)
	},
	methods: {
		// 请求
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.userName) {
				Object.keys(this.ruleForm).forEach((key) => {
					this.ruleForm[key] = ''
				})
				this.ruleForm.userName = this.$route.query.userName || undefined
				// 盈利率
				this.ruleForm.startEarningsRate =
					this.$route.query.startNetRate || undefined
				this.ruleForm.endEarningsRate =
					this.$route.query.endNetRate || undefined
				// 总盈利
				this.ruleForm.startTotalProfit =
					this.$route.query.startNetAmount || undefined
				this.ruleForm.endTotalProfit =
					this.$route.query.endNetAmount || undefined
				this.queryTime = [
					dayjs(this.$route.query.startDate) || start(),
					dayjs(this.$route.query.endDate) || end()
				]
				this.$router.replace({ query: {} })
				if (isLoadData) {
					this.handleSearch()
				}
			}
		},
		getSortClass(orderField, sortType, type) {
			if (
				this.ruleForm.orderField === orderField &&
				this.ruleForm.sortType === sortType
			) {
				return type === 1 ? 'sort-top-select' : 'sort-bottom-select'
			}
			return ''
		},
		sortAscOrDesc(orderField, sortType) {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.ruleForm.orderField = orderField
					this.ruleForm.sortType = sortType
					this.pageNum = 1
					this.getDataList()
				}
			})
		},
		getSearchParams() {
			const queryTime = this.queryTime || []
			const params = {
				...this.ruleForm,
				queryStartTime: queryTime[0]
					? dayjs(queryTime[0]).format('YYYY-MM-DD')
					: undefined,
				queryEndTime: queryTime[1]
					? dayjs(queryTime[1]).format('YYYY-MM-DD')
					: undefined
			}
			Object.keys(params).forEach((key) => {
				if (params[key] === '') {
					params[key] = undefined
				} else if (
					this.numberFieldList.indexOf(key) > -1 &&
					isNaN(params[key])
				) {
					params[key] = undefined
				}
			})
			return params
		},
		getDataList() {
			this.loading = true
			this.dataList = []
			const params = this.getParams(this.getSearchParams())
			this.$api
				.getPartnerCardPickSiftBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200 && Array.isArray(res?.data?.record)) {
						res?.data?.record.forEach((item) => {
							this.dataList.push({
								dataCount: {
									challengeHandCount:
										item?.challengeHandCount || 0, // 单挑手牌数
									deskmateHandCount:
										item?.deskmateHandCount || 0, // 同桌手牌数
									deskmateTimeCount:
										item?.deskmateTimeCount || 0, // 同桌时长（min）
									sameHistoryDevice:
										item?.sameHistoryDevice || 0, // 历史相同设备 0 不存在 1 存在
									sameHistoryIp: item?.sameHistoryIp || 0 // 历史相同IP 0 不存在 1 存在
								},
								dataList: item?.fineScreenDetailRespList || []
							})
						})
					}
					this.total = res?.data?.totalRecord || 0
				})
				.catch((e) => {
					console.log(e)
					this.loading = false
				})
		},
		handleSearch() {
			this.ruleForm.orderField = undefined
			this.ruleForm.sortType = undefined
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.pageNum = 1
					this.getDataList()
				}
			})
		},
		handleReset() {
			this.$refs.ruleForm.clearValidate()
			this.queryTime = [start(), end()]
			Object.keys(this.ruleForm).forEach((key) => {
				this.ruleForm[key] = undefined
			})
			this.dataList = []
		},
		handleExport() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					const params = this.getSearchParams()
					this.exportLoading = true
					this.exportExcelPublic({
						api: 'exportPartnerCardPickSiftBend',
						params
					}).finally(() => {
						this.exportLoading = false
					})
				}
			})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getDataList()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getDataList()
		}
	}
}
</script>

<style lang="scss" scoped>
.show-btn-action {
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
}

.sort-content {
	border-color: #ebeef5;
	display: inline-block;
	height: 36px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap;
	margin-right: 20px;
	.sort-title {
		font-size: 16px;
		vertical-align: middle;
	}
}
.sort-icon {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	height: 36px;
	width: 24px;
	vertical-align: middle;
	cursor: pointer;
	overflow: initial;
	position: relative;
	.sort-caret {
		width: 0;
		height: 0;
		border: 10px solid transparent;
		position: absolute;
	}
	.sort-top {
		border-bottom-color: #c0c4cc;
		bottom: 20px;
	}
	.sort-top-select {
		border-bottom-color: #409eff !important;
	}
	.sort-bottom {
		border-top-color: #c0c4cc;
		top: 20px;
	}

	.sort-bottom-select {
		border-top-color: #409eff !important;
	}
}
</style>
